import React, { forwardRef } from 'react';
import * as NotificationPrimitive from '@radix-ui/react-toast';
import { X } from 'lucide-react';

// NotificationProvider组件
const NotificationProvider = NotificationPrimitive.Provider;

// Notification组件
const Notification = NotificationPrimitive.Root;

// NotificationAction组件
const NotificationAction = forwardRef<HTMLButtonElement, NotificationPrimitive.ToastActionProps>(({ className, ...props }, ref) => (
  <NotificationPrimitive.Action
    ref={ref}
    className={`inline-flex h-8 shrink-0 items-center justify-center rounded-md px-2 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`}
    {...props}
  />
));

// NotificationClose组件
const NotificationClose = forwardRef<HTMLButtonElement, NotificationPrimitive.ToastCloseProps>(({ className, ...props }, ref) => (
  <NotificationPrimitive.Close
    ref={ref}
    className={`absolute right-2 top-2 rounded-md p-1 text-muted-foreground/50 opacity-0 transition-opacity hover:text-muted-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:opacity-100 ${className}`}
    {...props}
  >
    <X className="h-4 w-4" />
    <span className="sr-only">Close</span>
  </NotificationPrimitive.Close>
));

// NotificationDescription组件
const NotificationDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={`text-sm text-muted-foreground ${className}`}
    {...props}
  />
));

// NotificationGroup组件
const NotificationGroup = NotificationPrimitive.Group;

// NotificationViewport组件
const NotificationViewport = forwardRef<HTMLDivElement, NotificationPrimitive.ToastViewportProps>(({ className, ...props }, ref) => (
  <NotificationPrimitive.Viewport
    ref={ref}
    className={`fixed right-0 top-0 z-50 m-4 flex max-h-screen w-full max-w-sm flex-col gap-2 overflow-hidden rounded-md border bg-background p-4 shadow-lg md:max-w-md ${className}`}
    {...props}
  />
));

// NotificationTitle组件
const NotificationTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={`font-medium ${className}`}
    {...props}
  />
));

// 设置displayName
NotificationProvider.displayName = NotificationPrimitive.Provider.displayName;
Notification.displayName = NotificationPrimitive.Root.displayName;
NotificationAction.displayName = 'NotificationAction';
NotificationClose.displayName = 'NotificationClose';
NotificationDescription.displayName = 'NotificationDescription';
NotificationGroup.displayName = NotificationPrimitive.Group.displayName;
NotificationViewport.displayName = 'NotificationViewport';
NotificationTitle.displayName = 'NotificationTitle';

export { Notification, NotificationAction, NotificationClose, NotificationDescription, NotificationGroup, NotificationProvider, NotificationTitle, NotificationViewport };